<template>
	<view class="container">		
		<view class="p-30">	
		<view class="p-30 bg-white mb-20 section border-radius-base address">
			<view class="user-item mb-20 pb-20" @tap="jump('/pages/user/home?uuid='+message.user.uuid)">
				<cos-avatar :src="message.user.avatar" :showSex="true" :sexIcon="message.user.gender_label"></cos-avatar>
				<view class="user-item-user">
					<view class="d-flex align-items-center mb-10">
						<view class="mr-10">{{ message.user.nickname }}</view>
						
					</view>
					<view class="d-flex align-items-center">
						<view class="font-size-sm mr-10" v-if="message.user.city || message.user.province">{{ message.user.city || message.user.province }} |</view>
						<view class="font-size-sm mr-10">{{ message.user.identity_label }}</view>
						<view class="tag-box d-flex" v-if="message.user.is_guaranty || message.user.is_cert">
							<view class="mr-10 tag tag-guaranty" v-if="message.user.is_guaranty==1"><u-icon name='rmb' color="#ffffff" size='22'></u-icon>已担保</view>
							<view class="mr-10 tag tag-cert" v-if="message.user.is_cert==1"><u-icon name='account-fill' color="#ffffff" size='22'></u-icon>已认证</view>
						</view>
					</view>
				</view>
				<view class="text-color-assist" @tap="jump('/pages/message/userCert?realName='+message.user.cert.real_name+'&albumPhotos='+message.user.cert.album_photos.path+'&bustPhotos='+message.user.cert.bust_photos.path)">查看模特认证 <u-icon name='arrow-right'></u-icon></view>
			</view>
			<view class="d-flex mb-20">
				<view class="flex-shrink-0">报名备注：</view>
				<view>{{message.introduce}}</view>
			</view>
			<view class="p-20 text-over" style="background-color: #eee;" @tap="jump('/pages/notice/detail?id='+message.taks.id)">来自任务：{{message.task.demand}}</view>
			<view class="text-color-assist mt-10 text-right">{{$f.timeAgo(message.time_diff)}}报名</view>
		</view>
			
			<view class="p-30 bg-white mb-40 section border-radius-base">
				<view class="mb-20 title d-flex justify-content-between align-items-center">
					<view class='font-size-lg font-weight-bold'>联系方式 <text class="text-color-assist font-size-sm ml-20 font-weight-normal">(联系请说明来自人人约拍)</text> </view>
				</view>
				<view class="mb-10 d-flex justify-content-between">
					<view class="d-flex flex-shrink-0">
						<view class="mr-20 text-color-assist" style="width: 120rpx;">手机号:</view>
						<view>{{message.mobile}}</view>
					</view>
					<view v-if="message.status!=0" class="text-color-primary" @tap="tel(message.mobile)">拨打</view>
				</view>
				<view class="mb-10 d-flex justify-content-between">
					<view class="d-flex flex-shrink-0">
						<view class="mr-20 text-color-assist" style="width: 120rpx;">微信号:</view>
						<view>{{message.wechat_no}}</view>
					</view>
					<view v-if="message.status!=0" class="text-color-primary" @tap="copy(message.wechat_no)">复制</view>
				</view>
				<view class="mb-10 d-flex justify-content-between" v-if="message.task.need==1||message.task.need==2">
					<view class="d-flex flex-shrink-0">
						<view class="mr-20 text-color-assist" style="width: 120rpx;">收货人:</view>
						<view>{{message.name}}</view>
					</view>
					<view v-if="message.status!=0" class="text-color-primary" @tap="copy(message.name)">复制</view>
				</view>
				<view class="mb-10 d-flex justify-content-between" v-if="message.task.need==1||message.task.need==2">
					<view class="d-flex">
						<view class="mr-20 text-color-assist flex-shrink-0" style="width: 120rpx;">收货地址:</view>
						<view>{{message.address}}</view>
					</view>
					<view v-if="message.status!=0" class="text-color-primary flex-shrink-0" @tap="copy(message.address)">复制</view>
				</view>
			</view>
			<view class="p-30 bg-white mb-40 section border-radius-base">
				<view class="mb-20 title d-flex justify-content-between align-items-center">
					<view class='font-size-lg font-weight-bold'>上传买家秀作品</view>
				</view>
				<view class="d-flex align-items-center">
					<u-upload width="160" height="160" uploadText="上传图片" iconImg='/static/image.png' :mediaType='imageMediaType' :file-list="imagesMedia" :maxCount="imagesMedia.length" :multiple='true' :previewFullImage="true" :auto-upload='false'></u-upload>
				</view>
			</view>
			<view class="p-30 bg-white mb-40 section border-radius-base">
				<view class="mb-20 title d-flex justify-content-between align-items-center">
					<view class='font-size-lg font-weight-bold'>上传种草视频</view>
				</view>
				<view class="d-flex align-items-center">
					<u-upload width="160" height="160" uploadText="上传视频" iconImg='/static/video.png' :mediaType='videoMediaType' :file-list="videoMedia" :maxCount="1" :multiple='false' :previewFullImage="true" :auto-upload='false'></u-upload>
				</view>
			</view>
			<view class="p-30 bg-white mb-40 section border-radius-base" v-if="message.download_url">
				<view class="mb-20 title d-flex justify-content-between align-items-center">
					<view class='font-size-lg font-weight-bold'>作品下载地址 <text class="text-color-assist font-size-sm ml-20 font-weight-normal">(30分钟内有效)</text> </view>
				</view>
				<view class="d-flex align-items-center">
					<view class="text-color-blue text-over3 mr-10">{{message.download_url}}</view>
					<view class="text-color-primary flex-shrink-0" @tap="copy(message.download_url)">复制</view>
				</view>
			</view>
			<view class="font-size-base" style="color: #9A9A9A;">
				<view class="mb-10">温馨提示：</view>
				<view class="mb-10">1.平台禁止一切网店刷单操作。</view>
				<view class="mb-10">2.平台禁止一切色情私房拍照。</view>
				<view class="mb-10">3.切勿私下缴纳费用或定金的合作，发生经济纠纷小程序概不负责。</view>
			</view>
		</view>
		
		<!--  end -->
		<view class="sign-up-footer d-flex just-content-around align-items-center">
			<block v-if="message.status==0">
				<button type="default" @tap='noCooperationShow=true'>拒绝合作</button>
				<button type="primary" @tap='openTask'>开启合作</button>
			</block>
			<block v-if="message.status==1">
				<button disabled="true" type="default">等待对方上传作品</button>
			</block>
			<block v-if="message.status==2">
				<button type="info" @tap='finshCooperate'>确认完成</button>
			</block>
			<block v-if="message.status==99">
				<button type="info" @tap='download'>生成下载作品链接</button>
			</block>
			<block v-if="message.status==-1">
				<button disabled="true" type="default">任务已关闭</button>
			</block>
		</view>
		
		<!-- 暂不合作原因弹窗 -->
		<u-action-sheet cancel-btn="true" mask-close-able="true"
		@click="noCooperationAction" :list="noCooperationList" v-model="noCooperationShow" :safe-area-inset-bottom="true"></u-action-sheet>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			id:'',
			message:'',
			noCooperationShow:false,
			noCooperationList:[{text:'名额已满'},{text:'暂不符合要求'}],
			imagesMedia:[],
			videoMedia:[]
		}
	},
	computed:{
		...mapState(['hasLogin', 'userInfo', 'contact']),
	},
	onLoad(options) {
		this.id = options.id;
		this.getMessage()
	},
	methods:{
		async getMessage() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			let res = await this.$api('shopSignDetail')
			this.message = res.data;
			uni.hideLoading();
		},
		openTask() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '开启合作需要消耗2个人人豆',
				confirmText:'确认开启',
				success (res) {
					if (res.confirm) {
						uni.showLoading({
							mask: true,
							title: '开启中...'
						});
						that.message.status  = 1;
						uni.hideLoading();
					}
				}
			})
		},
		noCooperationAction(index) {
			this.rejectTask(index);
		},
		rejectTask(index) {
			uni.showLoading({
				mask: true,
				title: '处理中...'
			});
			
			this.message.status = -1
			this.message.reason = this.noCooperationList[index].text;
			uni.hideLoading();
		},
		finshCooperate() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确认完成合作？',
				confirmText:'确认',
				success (res) {
					if (res.confirm) {
						uni.showLoading({
							mask: true,
							title: '完成中...'
						});
						that.message.status=99;
						uni.hideLoading();
					}
				}
			})
		},
		download() {
			let that = this;
			if(this.message.download_nums==0) {
				this.genterDownloadUrl();
			}else{
				uni.showModal({
					title: '提示',
					content: '再次生成下载链接需要消耗2个人人豆',
					confirmText:'确认生成',
					success (res) {
						if (res.confirm) {
							that.genterDownloadUrl();
						}
					}
				})
			}
		},
		genterDownloadUrl() {
			uni.showLoading({
				mask: true,
				title: '生成中...'
			});
			
			this.message.download_nums = 1;
			this.message.download_url = "***********";
			this.message.download_at = "2022-11-06 00:00:00";
			uni.hideLoading();
			
		},
		// 预览图片
		doPreviewImage(item, index) {
			const media = this.albumMedias.map((val, index) =>{
				if(val.type==='video') {
					return {url:val.file.tempFilePath, type:'video', poster:val.poster.tempFilePath}
				}else if(val.type==='image') {
					return {url:val.file.tempFilePath, type:'image'}
				}
			});
			uni.previewMedia({
				sources: media, // 需要预览的资源列表
				current: index, // 当前显示的资源序号
				fail: () => {
					uni.showToast({
						title: '预览图片失败',
						icon: 'none'
					});
				}
			})
		},

		tel(mobile) {
			this.$f.tel(mobile);
		},
		copy(text) {
			this.$f.copy(text);
		},
		jump(url) {
			uni.navigateTo({
				url:url
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.container {
		height: auto;
		padding-bottom: 120rpx;
	}	
	.section {
		box-sizing: border-box;
		
		textarea {
			background-color: #f7f7f7;
			padding: 30rpx;
			width: 100%;
			height: 200rpx;
		}
	}
	
	.user-item {
		display: flex;
		justify-content: center; // 内容自适应：上下居中
		align-items: center; // 子项对齐方式：左右居中
		border-bottom: 2rpx solid #eee;
		
		.user-item-user {
			flex: 1;
			
			.cxplain {
				color: #999;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}
		
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	
	.sign-up-footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background-color: #FFFFFF;
		z-index: 10;
		padding: 20rpx 10rpx;
		
		button {
			height: 100%;
			font-size: $font-size-lg;
			border-radius: 100rpx !important;
			line-height: 80rpx;
			padding: 0 80rpx;
		}
	}
	.u-play-icon {
		position: absolute;
		top: 0;
		left:0;
		right:0;
		bottom:0;
		margin: auto;
		z-index: 10;
		border-radius: 100rpx;
		width: 44rpx;
		height: 44rpx;
		align-items: center;
		justify-content: center;
	}
	.tag-box {
		.tag{
			padding: 0rpx 10rpx;
			border-radius: 5rpx;
			font-size: 22rpx;
			background-color: #f5f5f5;
			color: #616161;
		}
		
		.tag-guaranty {
			color: #ffffff;
			background-color: #24B19A;
		}
		
		.tag-cert {
			color: #ffffff;
			background-color: #5A84FB;
		}
	}
</style>
